<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">电影管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>电影列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="电影名称">
        <el-input
          v-model="searchForm.movieName"
          placeholder="请输入电影名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">演员列表</el-divider>
    <div v-if="tableData">
      <el-table :data="tableData.result" :stripe="true" style="width: 100%">
        <el-table-column align="center" prop="cover" label="封面" width="180">
          <template slot-scope="scope">
            <el-image
              style="width: 80px; height: 100px"
              :src="scope.row.cover"
              fit="fit"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="title" label="标题">
        </el-table-column>
        <el-table-column align="center" prop="star_actor" label="主演">
        </el-table-column>
        <el-table-column
          align="center"
          prop="showingon"
          label="上映时间"
          width="180"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="duration"
          label="时长"
          width="180"
        >
          <template slot-scope="scope">{{ scope.row.duration }}分钟 </template>
        </el-table-column>
        <el-table-column align="center" prop="category_id" label="所属类别">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.category_id == 1"
              >热映</el-tag
            >
            <el-tag type="success" v-if="scope.row.category_id == 2"
              >待映</el-tag
            >
            <el-tag type="warning" v-if="scope.row.category_id == 3"
              >经典</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column align="center" prop="date" label="操作" width="240">
          <template slot-scope="scope">
            <el-row>
              <el-button
                type="info"
                icon="el-icon-user"
                @click="showEditActorsDialog(scope.row.id)"
                title="配置演员列表"
                circle
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-picture-outline-round"
                circle
                @click="showEditThumbDialog(scope.row.id)"
                title="配置剧照列表"
              ></el-button>
              <el-button
                type="warning"
                @click="$router.push(`/home/movie-update/${scope.row.id}`)"
                icon="el-icon-edit"
                circle
                title="修改演员信息"
              ></el-button>
              <el-button
                type="danger"
                @click="deleteMovie(scope.row.id)"
                icon="el-icon-delete"
                circle
                title="删除演员列表"
              ></el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      :page-size="tableData.pagesize"
      layout="prev, pager, next"
      :total="tableData.total"
      style="text-align: right; margin: 20px 0px"
      @current-change="changeCurrentPage"
    >
    </el-pagination>
    <!-- 设置修改剧照弹窗 -->
    <el-dialog title="配置剧照图片" :visible.sync="dialogThumbVisible">
      <el-upload
        class="upload-demo"
        ref="upload"
        multiple
        action="http://localhost:9000/upload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :file-list="fileList"
        :auto-upload="false"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="warning"
          @click="$router.push(`/home/thumb-list/${currentSelectedId}`)"
          >管理剧照图片</el-button
        >
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
    <!-- 设置配置演员弹框 -->
    <el-dialog title="配置剧照图片" :visible.sync="dialogActorsVisible">
      <el-transfer
        v-model="transferValue"
        :data="transferData"
        :titles="['未选择演员', '已选择演员']"
      ></el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogActorsVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitActors">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transferValue: [], //原始数据
      transferData: [], //选中项数据
      dialogActorsVisible: false, //绑定是否显示演员弹框
      currentSelectedId: 0, //绑定当前选中项的电影Id
      fileList: [], //绑定上传文件列表
      dialogThumbVisible: false,
      tableData: [], //存储表格所需数据
      searchForm: {
        movieName: "",
      },
    };
  },
  //页面挂载完毕执行
  mounted() {
    //加载演员列表
    this.loadMovieList();
    //加载所有演员
    this.loadAllActors();
  },
  methods: {
    //提交穿梭框收集数据
    submitActors() {
      console.log(this.transferValue);
      let movie_id = this.currentSelectedId;
      let actor_ids = this.transferValue.toString();
      this.$http.MovieApi.bindActors({ movie_id, actor_ids }).then((res) => {
        console.log("绑定演员", res);
        if (res.data.code == 200) {
          this.$message.success("演员绑定完成");
          this.dialogActorsVisible = false;
        }
      });
    },
    //加载所有演员,呈现到穿梭框中
    loadAllActors() {
      this.$http.ActorApi.list({ page: 1, pagesize: 10000 }).then((res) => {
        if (res.data.code == 200) {
          let mdata = [];
          res.data.data.forEach((item) => {
            mdata.push({
              key: item.id,
              label: item.actor_name,
            });
          });
          this.transferData = mdata;
        }
      });
    },
    //显示配置演员窗口
    showEditActorsDialog(id) {
      this.dialogActorsVisible = true;
      this.currentSelectedId = id;
      //发送请求，获取当前电影的所有演员
      this.$http.ActorApi.listByMovieId({ movie_id: id }).then((res) => {
        console.log("演员", res);
        if (res.data.code == 200) {
          this.transferValue = [];
          res.data.data.forEach((item) => {
            this.transferValue.push(item.actor_id);
          });
        }
      });
    },
    //处理上传成功后的结果
    handleSuccess(res) {
      let url = res.data;
      console.log(res);
      let movie_id = this.currentSelectedId;
      this.$http.MovieThumbApi.add({ url, movie_id }).then((res) => {
        console.log(res);
      });
    },
    //显示修改剧照对话窗
    showEditThumbDialog(id) {
      this.dialogThumbVisible = true;
      this.currentSelectedId = id;
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    //删除当前项
    deleteMovie(id) {
      this.$http.MovieApi.del({ id }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.loadMovieList();
        }
      });
    },
    //修改当前页
    changeCurrentPage(val) {
      let name = this.searchForm.movieName.trim();
      if (!name) {
        this.$http.MovieApi.list({ page: val, pagesize: 2 }).then((res) => {
          console.log(res);
          this.tableData = res.data.data;
        });
      } else {
        this.$http.MovieApi.listByName({ name, page: val, pagesize: 2 }).then(
          (res) => {
            console.log("模糊查询", res);
            if (res.data.code == 200) {
              this.tableData = res.data.data;
            }
          }
        );
      }
    },
    onSearch() {
      let name = this.searchForm.movieName.trim();
      if (!name) {
        this.loadMovieList();
      } else {
        this.$http.MovieApi.listByName({ name, page: 1, pagesize: 2 }).then(
          (res) => {
            console.log("模糊查询", res);
            if (res.data.code == 200) {
              this.tableData = res.data.data;
            }
          }
        );
      }
    },
    loadMovieList() {
      this.$http.MovieApi.list({ page: 1, pagesize: 2 }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
      });
    },
  },
};
</script>

<style scoped>
.actor-item {
  display: inline-block;
  margin: 20px 20px 0px 0px;
  text-align: center;
}
.actor-item div {
  font-size: 0.9em;
}
</style>